<template>
  <div class="header">
    <span class="title">党支部数据可视化大屏</span>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Header',
});
</script>

<style scoped>
.header {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('@/assets/preview (3).png'); /* 背景图片 */
  background-size: cover;
  background-repeat: no-repeat;
  position: relative; /* 保证子元素可以使用绝对位置 */
}

.title {
  font-family: 'NewFont',serif; /* 华文隶书字体 */
  font-size: 48px; /* 字体大小 */
  filter: drop-shadow(3px 3px 3px rgb(189, 46, 34));
  writing-mode: horizontal-tb;
  word-spacing: 0px;
  letter-spacing: 4px;
  text-orientation: upright;
  position: relative; /* 设置相对定位 */
  top: -10px; /* 文字向上移动 10px */
  user-select: text;
}
</style>
